<template>
	<div class="goods-details table-theme" v-if="goodsInfo">
		<head-back-title title="商品详情"></head-back-title>
		<el-card>
			<el-form :model="goodsInfo" :rules="goodsRules" ref="goodsInfo" label-width="120px">
				<div class="goods-info">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="商品名称:" prop="">
								<el-input disabled v-model="goodsInfo.store_goods_name" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="零售价:" prop="">
								<el-input disabled v-model.trim="goodsInfo.retail_price" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="成本价:" prop="">
								<el-input disabled v-model="goodsInfo.self_price" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="划线价:" prop="">
								<el-input disabled v-model="goodsInfo.market_price" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="商品库存:" prop="">
								<el-input disabled v-model="goodsInfo.num" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="品类分类:" prop="">
								<el-select disabled v-model="goodsInfo.class_id" placeholder="品类">
									<el-option v-for="item in classList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
								</el-select>

							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="套餐类型:" prop="type">
								<el-select disabled v-model="goodsInfo.type" placeholder="请选择">
									<el-option value="1" label="商品"></el-option>
									<el-option value="2" label="套餐的单品"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="商品类型:" prop="goods_type">
								<el-select disabled v-model="goodsInfo.goods_type" placeholder="请选择">
									<el-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.value" :label="item.label"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="是否免邮:" prop="free_express">
								<el-select disabled v-model="goodsInfo.free_express" placeholder="请选择">
									<el-option :value="0" label="不免邮"></el-option>
									<el-option :value="1" label="免邮"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="是否展示:" prop="">
								<el-select disabled v-model="goodsInfo.type" placeholder="请选择">
									<el-option value="1" label="商品（可展示）"></el-option>
									<el-option value="2" label="套餐单品（不可展示）"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
					  <el-col :span="6" v-if="goodsInfo.goods_type === 4">
						  <el-form-item label="活动价:">
							  <el-input disabled v-model="goodsInfo.activity_price" placeholder="请输入活动价"><i slot="suffix">元</i></el-input>
						  </el-form-item>
					  </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6" v-if="goodsInfo.parameter_list.length != 0" v-for="(item, index) in goodsInfo.parameter_list"
						 :key="index">
							<el-form-item :label="item.parameter_key" prop="">
								<el-input disabled v-model="item.parameter_value" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="14">
							<el-form-item label="商品简介:" prop="">
								<el-input disabled type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.brief"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-table :data="goodsInfo.sku" border class="factory-table">
						<el-table-column label="ID" align="center" prop="store_goods_sku_id" width="80"></el-table-column>
						<el-table-column label="sku款号" align="center" prop="store_goods_sku_sn">
						</el-table-column>
						<el-table-column align="center" width="120" label="规格" prop="color">
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="成本价" align="center" v-if="admin_type == 2 || admin_type == 1" prop="self_price">
						</el-table-column>
						<el-table-column label="零售价" align="center" v-if="admin_type == 2 || admin_type == 1" prop="retail_price">
						</el-table-column>
						<el-table-column label="活动价" align="center" v-if="goodsInfo.goods_type == 4" prop="activity_price">
						</el-table-column>
						<el-table-column label="划线价" align="center" prop="market_price">
						</el-table-column>
						<el-table-column label="件数" align="center" prop="sku_num">
						</el-table-column>
						<el-table-column label="操作" align="center" width="180">
							<template slot-scope="scope">
								<el-button type="success" size="mini" @click="addComment(scope.row.goods_id,scope.row.sku_id)">添加评论</el-button>
								<el-button type="success" size="mini" @click="priceTag(scope.row)">价格标签</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="goods-image">
						<p class="title" style="font-size: 20px;">商品图片</p>
						<div class="image-content">
							<el-row :gutter="20">
								<el-col :span="6">
									<el-form-item label="主图:" prop="" class="main-image">
										<el-upload disabled ref="upload" action="fakeaction" :http-request=" function(res) { return upload(res); } "
										 multipleaccept="image/*" :show-file-list="false"> <img v-if="goodsInfo.image_middle" :src="goodsInfo.image_middle"
											 width="100%" />
											<i v-else class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="副图(最多四张):" prop="">
										<el-upload class="cannot-add-picture" disabled action="fakeaction" list-type="picture-card" :file-list="vice_middle"
										 multiple :limit="4" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i>
										</el-upload>
										<el-dialog :visible.sync="dialogVisible" width="800px" center :modal-append-to-body="false">
											<img width="100%" :src="dialogImageUrl" alt="" />
										</el-dialog>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="视频:" prop="" class="video">
										<video-player style="width: 500px; margin-left: 25px;" v-if="goodsInfo.video" id="video" ref="videoPlayer"
										 class="vjs-custom-skin" :playsinline="true" :options="playerOptions" />
									</el-form-item>
								</el-col>
							</el-row>
						</div>
						<p class="title" style="font-size: 20px;">产品详情图</p>
						<div class="detail-image">
							<el-image style="width: 900px;" v-for="(item,index) in img_info" :src="item" :preview-src-list="img_info" :key="index">
							</el-image>
						</div>
					</div>
				</div>
			</el-form>
		</el-card>
		<!-- 价格标签弹框 -->
		<el-dialog title="价格标签" :visible.sync="showDialog" center :modal-append-to-body="false" width="710px">
			<div class="price-tag" ref="imageWrapper" v-if="dataURL == ''">
				<div class="price-tag-top">
					<div class="top-left">
						<img :src="poster.store_logo">
						<p class="price">¥{{poster.retail_price}}</p>
						<p class="sku-sn">{{poster.sku_sn}}</p>
					</div>
					<div class="top-right">
						<img :src="poster.image_middle">
					</div>
				</div>
				<div class="price-tag-bottom">
					<div class="bottom-left">
						<p>品名:{{poster.goods_name}}</p>
						<p>规格:{{poster.color}}</p>
					</div>
					<div class="bottom-right">
						<div class="qr-tips">
							<p>查看产品详情</p>
							<p>扫一扫</p>
						</div>
						<img :src="poster.qr_img">
					</div>
				</div>
			</div>
			<img v-else :src="dataURL">
			<span slot="footer" class="dialog-footer">
				<a v-if="!Imgloading" :href="dataURL" download="qrcode.png"><el-button>{{loadingText}}</el-button></a>
				<el-button v-else :loading="Imgloading">{{loadingText}}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import html2canvas from "html2canvas"
	export default {
		components: {
			ImgPopover
		},
		data() {
			return {
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				disabled: true,
				type: '',
				value: '',
				vice_middle: [],
				img_info: [],
				dialogImageUrl: '',
				dialogVisible: false,
				goodsInfo: '',
				goodsRules: {},
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4',
						src: ''
					}],
					hls: true,
					poster: '', // 你的封面地址
					width: '500px', // 播放器宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试'
				},
				classList: [], // 品类
				loadingText:'生成中',
				Imgloading:false,
				dataURL:"",
				poster: {
					store_logo: '',
					image_middle: '',
					qr_img: '',
					goods_name: '',
					sku_sn: '',
					retail_price: '',
					lining: '',
					size: '',
					lining_address: '',
				},
				showDialog:false,
				goodsTypeList: [{
						value: 1,
						label: '普通商品'
					},
					{
						value: 4,
						label: '秒杀商品'
					},
				],
			};
		},
		methods: {
			init() {
				// type 1 详情 2添加 2编辑
				this.type = this.$route.query.type;

				let data = {
					paramter: 1,
					store_goods_id: this.$route.query.id,
					// store_id: localStorage.getItem('store_id')
				};
				this.$http(this.$ApiList.StoreGoodsInfo, data).then(res => {
					this.goodsInfo = res.datas;
					this.goodsInfo.type = String(this.goodsInfo.type);
					for (let i in res.datas.vice_big) {
						let item = {
							url: res.datas.vice_big[i]
						};
						this.vice_middle.push(item);
					}
					this.img_info = res.datas.img_info
					this.$nextTick(() => {
						this.playerOptions.sources[0].src = this.goodsInfo.video;
					});
				});
			},
			handleRemove(file, fileList) {
				for (let i in this.vice_middle) {
					if (this.vice_middle[i].uid == file.uid) {
						delete this.vice_middle[i];
					}
				}
				console.log(this.vice_middle);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			// 图片上传
			upload(params) {},
			remove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			// 返回
			goBack() {
				this.$router.go(-1);
			},
			// 添加评论
			addComment(goodsId, sku_id) {
				this.$router.push({
					path: '/add_goods_comment',
					query: {
						type: 1,
						id: goodsId,
						skuid: sku_id
					}
				});
			},
			getClass() {
				let data = {
					store_id: localStorage.getItem('store_id')
				}
				this.$http(this.$ApiList.StoreGoodsClassList, data).then(res => {
					this.classList = res.datas
				});
			},
			priceTag(item) {
				console.log(item)
				this.loadingText = '生成中'
				this.Imgloading = true
				this.dataURL = ''
				this.poster = {
					store_logo: this.goodsInfo.store_logo,
					image_middle: item.img,
					goods_name: this.goodsInfo.store_goods_name,
					sku_sn: item.store_goods_sku_sn,
					color:item.color,
					retail_price:item.retail_price
				}
				let data = {
					goods_id: item.store_goods_id,
					store_id:localStorage.getItem('store_id')
				}

				this.$http(this.$ApiList.appCreateGoodsQr, data).then(res => {
					this.poster.qr_img = res.datas
					
					this.showDialog = true
					setTimeout(() => {
						html2canvas(this.$refs.imageWrapper, {
							useCORS: true,
							backgroundColor: null,
						}).then(canvas => {
							this.dataURL = canvas.toDataURL("image/png");
							this.$message({
								message: '图片生成成功',
								type: 'success'
							});
							this.Imgloading = false
							this.loadingText = '点击下载'
						});
					}, 500)
				});
			},
		},
		created() {
			this.init();
			this.getClass();
		}
	};
</script>

<style lang="scss">
	.goods-details {
		.el-select{
			width: 100%;
		}
		.image-content .el-upload {
			background-color: #fbfdff;
			border: 1px dashed #c0ccda;
			border-radius: 6px;
			box-sizing: border-box;
			width: 148px;
			height: 148px;
			cursor: pointer;
			line-height: 146px;
			vertical-align: top;
		}

		.image-content .el-upload .el-icon-plus {
			font-size: 28px;
			color: #8c939d;
		}

		.detail-image {
			width: 902px;
			border: 1px solid #E3E3E3;
		}


		.cannot-add-picture .el-upload--picture-card {
			display: none;
		}

		.main-image .el-form-item__label,
		.video .el-form-item__label {
			width: 50px !important;
		}

		.main-image .el-form-item__content,
		.video .el-form-item__content {
			margin-left: 0 !important;
		}
		.price-tag {
			width: 660px;
			height: 420px;
			padding: 32px 32px;
			background: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-09-09/20200909/589be527afd910bb0385071616dc4de8.png) no-repeat;
			background-size: 100% 100%;

			.price-tag-top {
				display: flex;

				.top-left {
					flex: 1;

					img {
						width: 100px;
					}

					.price {
						margin-top: 40px;
						font-size: 30px;
						color: red;
						font-weight: bold;
					}

					.sku-sn {
						font-weight: bold;
						font-size: 20px;
					}
				}

				.top-right {
					margin-top: 30px;
					flex: 1;
					display: flex;
					flex-direction: row-reverse;

					img {
						display: block;
						width: 150px;
						height: 150px;
					}
				}
			}

			.price-tag-bottom {
				display: flex;
				margin-top: 30px;

				.bottom-left {
					width: 360px;
					p {
						margin-top: 4px;
						font-size: 18px;
						// font-weight: bold;
					}
				}

				.bottom-right {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: row-reverse;

					.qr-tips {
						position: absolute;
						display: flex;
						left: 48px;
						top: 10px;

						p {
							width: 20px;
							font-size: 12px;
							// font-weight: bold;
						}
					}

					img {
						display: block;
						width: 150px;
						height: 150px;
					}
				}
			}


		}

	}
</style>
